import React from 'react'
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils';
import flexStyle from '../../../configs/flex';
import fontsize from '../../../configs/fontsize';
import skin from '../../../configs/skin';

let chooseType = -1

export default class ProblemType extends React.Component {
  static defaultProps={
    problemType: []
  }

  render() {
    let problemArea = []
    let problemLine = []
    this.props.problemType.forEach((item, index)=>{
      problemLine.push(<TouchableOpacity key={index + 'problembuttom'} style={[item.id === chooseType ? skin.baseBgColorNoActive : styles.noActiveButtom, styles.problemButton, flexStyle.flexH, flexStyle.flexHc, flexStyle.flexVc]}
        onPress={()=>{
          chooseType = item.id
          this.props.changeProblem(item.id)
        }}><Text style={[item.id === chooseType ? styles.activeButtom : {}, fontsize.fontsize24]}>{item.name}</Text></TouchableOpacity>)
      if ((index + 1) % 2 === 0) {
        problemArea.push(<View key={(index + 1) / 2 + 'problemline'} style={[flexStyle.flexH, flexStyle.flexHsb]}>{problemLine}</View>)
        problemLine = []
      }
      if (index === this.props.problemType.length - 1 && (index + 1) % 2 !== 0) {
        problemArea.push(<View key={(index + 1) / 2 + 'problemline'} style={[flexStyle.flexH]}>{problemLine}</View>)
      }
    })

    return (
      <View style={[styles.wrapper, flexStyle.flexV]}>
        <Text style={[fontsize.fontsize26, styles.problemText]}>请选择您要反馈的问题类型</Text>
        <View style={[flexStyle.flexV, { marginTop: px2dp(36) }]}>
          {problemArea}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    width: px2dp(750),
    paddingTop: px2dp(26),
    paddingHorizontal: px2dp(30),
    backgroundColor: '#FFFFFF'
  },
  problemText: {
    color: '#666666'
  },
  problemButton: {
    width: px2dp(330),
    height: px2dp(60),
    marginBottom: px2dp(40),
    borderRadius: px2dp(8)
  },
  noActiveButtom: {
    backgroundColor: '#F2F5F6',
    color: '#333333'
  },
  activeButtom: {
    color: '#FFFFFF'
  }
})